import { ElButton } from 'element-plus'

import * as styles from './HelloWorldTSX.css'
import type { HelloWorldTSXRef } from './HelloWorldTSX.type'

export default function render(this: HelloWorldTSXRef) {
  return (
    <div class={styles.comp}>
      <h1>{this.msg}</h1>
      <div class="card">
        <ElButton type="primary" onClick={this.handleCount}>
          count is {this.count}
        </ElButton>
      </div>
      <p class={styles.readTheDocs}>This component is Hello World TSX</p>
      {this.$slots.extra?.()}
      <p>内部引用：{this.contentComputed}</p>
    </div>
  )
}
